<template>
  <div>
    <!--<img v-for="(item, index) in list" :src="item.src" height="20">-->
    <img class="preview-img" v-for="(item, index) in list" :src="item.src" height="0"
             @click="$preview.open(index, list)">
    <table v-if="showTable">
      <tr class="tableHead">
        <td>公司名称</td>
        <td>image</td>
        <td>标注字体</td>
        <td>name</td>
        <td>phoneNumber</td>
      </tr>
      <tr v-for="labelInformation in labelInformationList" class="imageInformation">
        <td class="name">
          <p v-for="dev in labelInformation.developer">{{dev}}</p>
        </td>
        <td>
          <li class="imageUrl" v-for="(url,index) in labelInformation.urls"><img :src="url" height="95" width="100%"
                                                                                 @click="showImage(url)"></li>
        </td>
        <td class="font">
          <ul v-for="fonts in labelInformation.font">
            <li class="imageFont"><p v-for="font in fonts">{{font}}</p></li>
          </ul>
        </td>
        <td>
          <ul v-for="name in labelInformation.name">
            <li class="fontName"> <p>{{name}}</p></li>
          </ul>
        </td>
        <td class="phone">
          <ul v-for="phones in labelInformation.phones">
            <li class="fontPhone">
              <p ><a class="numberPhone" v-for="phone in phones">{{phone}}</a></p>
            </li>
          </ul>
        </td>
      </tr>
    </table>
    <p class="page">第{{pageNumber+1}}页</p>
    <mt-button type="default" size="small" class="PreviousPage" v-on:click="toPreviousPage">上一页</mt-button>
    <mt-button type="default" size="small" class="nextPage" v-on:click="toNextPage">下一页</mt-button>
  </div>
</template>
<script>
  export default {
    name: "labelInformation",
    data() {
      return {
        labelInformation: {},
        countLimit: 100,
        showTable: false,
        labelInformationList: [],
        // pageNumber:{num:0},
        pageNumber: 0,
        lenResult: 0,
        list: [{
          src: 'http://pp.myapp.com/ma_pic2/0/shot_52493748_1_1517495819/550',
          w: 600,
          h: 200
        }, {
          src: 'https://placekitten.com/1200/900',
          w: 900,
          h: 900
        }]
      }
    },

    mounted: function () {
      this.show();
    },
    methods: {
      show: function () {
        var self = this;
        // AV.Cloud.run('getResult', this.pageNumber).then(function(result) {
        //   // console.log(result);
        //   for(var id in result.data){
        //     self.labelInformationList.push(result.data[id])
        //   }
        //   console.log(self.labelInformationList)
        // },function(err){
        //   console.log(err)
        // });
        self.labelInformation={};
        var query = new AV.Query('FontData');
        query.limit(this.countLimit)
        query.skip(self.pageNumber * this.countLimit)
        query.find().then(function (results) {
          self.lenResult = results.length;
          self.labelInformationList = [];
          for (var i = 0; i < results.length; i++) {
            if (self.labelInformation.hasOwnProperty(results[i].toJSON().developers)) {
              self.labelInformation[results[i].toJSON().developers].developer.push('')
              self.labelInformation[results[i].toJSON().developers].urls.push(results[i].toJSON().imageUrl)
              self.labelInformation[results[i].toJSON().developers].font.push(results[i].toJSON().lableData)
              self.labelInformation[results[i].toJSON().developers].phones.push(results[i].toJSON().phones)
              self.labelInformation[results[i].toJSON().developers].name.push(results[i].toJSON().name)
            } else {
              var imageu = {}
              imageu.developer = [results[i].toJSON().developers];
              imageu.urls = [results[i].toJSON().imageUrl];
              imageu.font = [results[i].toJSON().lableData];
              imageu.name=[results[i].toJSON().name];
              imageu.phones=[results[i].toJSON().phones]
              self.labelInformation[results[i].toJSON().developers] = imageu
            }
          }
          self.labelInformationList = self.labelInformation
        }, function (error) {

        });
        this.showTable = true;
      },
      showImage(url){
        var list = [{
          src: url,
          w: 400,
          h: 300
        }];
        this.$preview.open(0,list)
      },
      toNextPage: function () {
        if (this.lenResult === this.countLimit) {
          this.pageNumber++;
          this.show();
        } else {
          this.$messagebox.alert('已经是最后一页了').then(action => {
          });
        }
      },
      toPreviousPage: function () {
        if (this.pageNumber > 0) {
          this.pageNumber--;
          this.show();
        } else {
          this.$messagebox.alert('已经是第一页了').then(action => {
          });
        }
      }
    },
  }
</script>

<style scoped>

  li{
    list-style: none;
  }
  * {
    text-align: center;
  }
  div {
    width: 100%;
  }

  table {
    position: relative;
    width: 94%;
    margin-top: 3%;
    margin-left: 3%;
    table-layout: fixed;
    border-collapse: collapse
  }

  tr {
    font-size:15px;
    border: 1px solid #B9B9B9;
  }

  td {
    word-wrap: break-word;
    border: 1px solid #B9B9B9;
    position: center;
  }

  .font {

    border-collapse: collapse
  }

  .nextPage {
    position: absolute;
    font-size: 15px;
    border: 1px solid #B9B9B9;
    width: 80px;
    margin-top: 10px;
    margin-left: 15%;
    color:#ffffff;
    background-color: blue;
  }
  .page {
    margin-top: 20px;
  }
  .tableHead {
    font-size:20px;
    color:#ffffff;
    background-color: #99A9BF;
    height: 80px;
  }
  .PreviousPage {
    font-size: 15px;
    position: absolute;
    border: 1px solid #B9B9B9;
    width: 80px;
    margin-top: 10px;
    display: block;
    margin-left: 11%;
    color: #ffffff;
    background-color: blue;
  }

  .imageFont {
    font-size: 10px;
    min-height: 100px;
    list-style-type: none;
    border-bottom: 1px solid #888888
  }

  .imageUrl {
    min-height: 100px;
    list-style-type: none;
    border-bottom: 1px solid #888888
  }
  .fontName{
    font-size: 9px;
    height: 100px;
    list-style-type: none;
    border-bottom: 1px solid #888888

  }
  .fontPhone{
    min-height: 100px;
    list-style-type: none;
    border-bottom: 1px solid #888888;
    font-size: 9px;
  }
  .preview-img{
    width: 0;
    height: 0;
  }
  .numberPhone{
    margin: 0;
    padding: 0;
    width: 100%;
    display: block;
  }
  .phone{

  }
</style>
